<template>
  <div class="articleListDetail pl30 pr30 pt30 bg-fff">
    <div class="c-333 fs30">{{info.title}}</div>
    <div class="c-flex fs20 c-999 mt15">
      <span>{{info.timer_date}}</span>
      <span style="margin-left:0.2rem">{{info.source}}</span>
      <span style="margin-left:0.2rem" v-if="!loading">{{info.read_num}}阅读</span>
    </div>
    <!-- <div class="mt20" style="width:100%;height:2.4rem;position:relative;background:#aaa;">
            <img :src="'http://img.wangyuhudong.com/'+info.icon" alt="" style="width:100%;height:2.4rem;">
    </div>-->
    <div v-html="info.remark" class="remark-wrap"></div>
    <div class="c-flex c-j-c loading">
      <p v-show="loading" class="page-infinite-loading">
        <mt-spinner type="fading-circle" color="#fff" :size="30"></mt-spinner>加载中...
      </p>
    </div>
    <div class="mask" v-show="loading"></div>
  </div>
</template>

<script>
export default {
  name: "articleListDetail",
  data() {
    return {
      info: {},
      loading: false
    };
  },
  mounted() {
    document.title = "";
    this.getDetail(this.$route.query.id);
  },

  methods: {
    getDetail(id) {
      this.loading = true;
      this.axios
        .post("invoking/invokingXQ", {
          id: id
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code == 0) {
            this.info = res.data.object.info;
            this.loading = false;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="less" scoped>
.pic {
  width: 1.8rem;
  height: 1.78rem;
  background: #f6f6f6;
  margin-right: 0.3rem;
}

.title {
  font-size: 0.3rem;
  color: #333;
  margin: 0.1rem 0;
}

.content {
  font-size: 0.2rem;
  color: #999;
  line-height: 0.36rem;
}

.btn {
  padding: 0 0.2rem;
  color: #d2d2d2;
  &:after {
    border-radius: 1rem;
  }
}
</style>
<style lang="less">
.articleListDetail {
  img {
    width: 100% !important;
    height: auto !important;
  }
}
</style>

